<template>
  <view class="view-eva">
    <NavBar title="查看评价"/>
    <view class="content">
      <view class="eva-details">
        <view class="eva-top">
          <view class="user-info">
            <image :src="evaInfo.img" class="avatar" v-if="evaInfo.img"/>
            <view class="user-name">
              <!-- <view class="name"> {{item.member_name}} </view> -->
              <view class="time"> {{evaInfo.create_time}} </view>
            </view>
          </view>
          <view class="star-box">
      			<view class="star" :class="evaInfo?.star>=num?'a-star':''" v-for="num in 5" :key="'num'+num"> </view>
          </view>
        </view>
        <view class="eva-info">
          <view class="text"> {{evaInfo.detail}} </view>
          <view class="img-box" v-if="evaInfo.img">
            <image :src="img" v-for="img in evaInfo.img" :key="img" class="i-img"/>
          </view>
          <view class="reply" v-if="evaInfo.reply">
            <view> {{evaInfo.reply}} </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app'
  import NavBar from '@/components/NavBar.vue';
  import { ViewEvaApi } from '@/service/shop.js'
  const evaInfo = ref({
    img: '',
    star: 0
  })
  const viewEva = (order_id) => {
    ViewEvaApi({order_id}).then(res => {
      evaInfo.value = res
      console.log(evaInfo.value);
    })
  }
  onLoad((e) => {
    const { order_id } = e
    viewEva(order_id)
  })
</script>

<style lang="scss" scoped>
  .view-eva {
    .content {
      padding: 10px 12px;
      .eva-details {
        margin-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #E6E6E6;
        .eva-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .user-info {
            display: flex;
            .avatar {
              width: 32px;
              height: 32px;
              margin-right: 10px;
      				border-radius: 50%;
            }
            .name {
              font-weight: 500;
              font-size: 14px;
              color: #666666;
              line-height: 17px;
            }
            .time {
              font-weight: 400;
              font-size: 12px;
              color: #999999;
              line-height: 16px;
            }
          }
          .star-box {
      			display: flex;
      			align-items: center;
      			.star {
      				width: 12px;
      				height: 12px;
      				margin-right: 4px;
      				background: url('/static/icon/rider/xx.png') no-repeat center center;
      				background-size: 100% 100%;
      				&:nth-last-of-type(1) {
      					margin-right: 0;
      				}
      				&.a-star {
      					background: url('/static/icon/rider/a-xx.png') no-repeat center center;
      					background-size: 100% 100%;
      				}
      			}
          }
        }
        .eva-info {
          margin-top: 10px;
          .text {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            line-height: 19px;
          }
          .img-box {
            margin: 10px 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 创建5列 */
            gap: 9px; /* 如果需要间距，可以设置为非零值 */
            box-sizing: border-box; /* 确保内边距不会增加容器大小 */
            .i-img {
              width: 109px;
              height: 109px;
            }
          }
          .reply {
            padding: 6px 10px;
            background: #F4F4F4;
            border-radius: 5px 5px 5px 5px;
            view {
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              line-height: 19px;
            }
          }
        }
      }
    }
  }
</style>
